<!DOCTYPE html>
<html lang="en" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="/layui/css/layui.css">
  <link rel="stylesheet" href="/css/custom.form.css">
</head>
<body>
<div class="panel panel-default operation" hidden>
  <div class="panel-heading title"></div>
<div class="layui-card-body">
<form class="layui-form " action="" lay-filter="info" style="margin-top: 10px">
      <input name="id" hidden/>
        
	<div class="layui-form-item">
      <label class="layui-form-label">摄像头ID</label>
      <div class="layui-input-block">
        <input type="messageCamid" name="messageCamid" placeholder="请输入摄像头ID" autocomplete="off" class="layui-input">
      </div>
    </div>
    
    
    <div class="layui-form-item">
      <label class="layui-form-label">加油站名称</label>
      <div class="layui-input-block">
        <input type="stationinfoName" name="stationinfoName" placeholder="加油站名称" autocomplete="off" class="layui-input">
      </div>
    </div>
    
    <div class="layui-form-item">
      <label class="layui-form-label">预警图片</label>
      <div class="layui-input-block">
        <img id="_image" src="" style="width:80%"></img>
      </div>
    </div>
    <div class="layui-form-item">
   		<label class="layui-form-label">处理类型</label>
   		<div class="layui-input-block">
	      <select id="handleType" name="handleType" lay-filter="select-type">
	          <option value="0">请选择处理类型</option>
	          <option value="人为影响变动">人为影响变动</option>
	          <option value="天气影响变动">天气影响变动</option>
	          <option value="程序误报">程序误报</option>
	      </select>
		</div>
    </div>
    
	<div class="layui-form-item">
      <label class="layui-form-label">变动原因</label>
      <div class="layui-input-block">
        <input type="handleReason" name="handleReason" placeholder="请输入变动原因" autocomplete="off" class="layui-input">
      </div>
    </div>
    
  <div class="layui-form-item">
  <div class="layui-input-block">
    <button type="submit" class="layui-btn" lay-submit="" lay-filter="submit">确认</button>
    <div class="layui-btn layui-btn-primary" id="btn_cancel">返回</div>
  </div>
</div>
</form>
</div>
</div>

	<div class="layui-tab table_div">

	    <ul class="layui-tab-title">
			<li class="layui-this" id="content1" >未处理</li>
			<li id="content2" >已处理</li>
		</ul>
		
		<div class="layui-tab-content">
			
			<div class="layui-tab-item layui-show">
				<div class="layui-form-item">
				  <div class="layui-input-inline layui-form">
			      	<select id="taxorgcodeInput1">
					</select>
			      </div>
			      <div class="layui-input-inline">
        			<input type="text" id="stationNameInput1" class="layui-input"  autocomplete="off" placeholder="请输入加油站名称">
      			  </div>
				  <div class="layui-input-inline">
			        <input type="text" id="createTimeInput1" class="layui-input"  autocomplete="off" placeholder="请输入时间范围">
			      </div>
		
			      <div class="layui-input-inline ">
			        <button class="layui-btn" onclick="search1()"  id="search">查询</button>
			        <button class="layui-btn"   id="export1">导出全部</button>
			      </div>
		    	</div>
		    	
		    	<table class="layui-table" id="showTable1" lay-filter="showTable" ></table>
			</div>
			
			<div class="layui-tab-item">
				<div class="layui-form-item">
				  <div class="layui-input-inline layui-form">
			      	<select id="taxorgcodeInput2">
					</select>
			      </div>
			      <div class="layui-input-inline">
        			<input type="text" id="stationNameInput2" class="layui-input"  autocomplete="off" placeholder="请输入加油站名称">
      			  </div>
				  <div class="layui-input-inline">
			        <input type="text" id="createTimeInput2" class="layui-input"  autocomplete="off" placeholder="请输入时间范围">
			      </div>
			     <div class="layui-input-inline">
			        <input type="text" id="createTimeInput2" class="layui-input"  autocomplete="off" placeholder="">
			      </div>
			      <div class="layui-input-inline ">
			        <button class="layui-btn" onclick="search2()"  id="search">查询</button>
			        <button class="layui-btn"   id="export2">导出全部</button>
			      </div>
		    	</div>
		    	
		    	<table class="layui-table" id="showTable2" lay-filter="showTable" ></table>
				
			</div>
		</div>
		
		<div id="searchParam">
		
		</div>
	</div>
	
	
<script type="text/html" id="tool1">
  <a class="layui-btn layui-btn-xs" lay-event="edit" >处理</a>
</script>

</body>
</html>
<script src="/layui/layui.all.js"></script>
<script src="/js/core.util.js"></script>
<script>
  //获取token
  var token = CoreUtil.getData("access_token");
  //地址栏转义token中的#号
  var tokenQuery = token.replace("#", "%23");
  var tableIns1;
  var tableIns2;

  var table = layui.table;
  var form = layui.form;
  var layer = layui.layer;
  var $ = jQuery = layui.jquery;
  var laydate = layui.laydate;

  var firstDayOfMonth = firstDayOfMonth();
  var lastDayOfMonth = lastDayOfMonth();
  var startTime1 = "";
  var endTime1 = "";
  var startTime2 = "";
  var endTime2 = "";
  
  console.log(firstDayOfMonth);
  console.log(lastDayOfMonth);
  console.log(firstDayOfMonth + " 至 " + lastDayOfMonth);
  
  $("#createTimeInput1").val(firstDayOfMonth + " 至 " + lastDayOfMonth);
  $("#createTimeInput2").val(firstDayOfMonth + " 至 " + lastDayOfMonth);

  $(function() {
	  // 加载机关
      CoreUtil.sendGet("/sys/deptlist",null , function(res) {
			if (res.code == '0') {
				var value = res.data[0];
				var opt = "<option value = ''>请选择所属机关</option>";
				for (var i in value) {
					opt += '<option value = "' + value[i].id + '">'
							+ value[i].name + '</option>';
				}
				
				$("#taxorgcodeInput1").html(opt);
				$("#taxorgcodeInput2").html(opt);
				form.render('select'); //需要渲染一下
			} else {
				layer.msg(res.msg);
				return false;
			}
		}, false, false);
		
  });
  
  layui.use(['table', 'layer', 'laydate'], function () {
	laydate.render({
		elem : '#createTimeInput1',
		type : 'date',
		range : '至',
		done : function(value, date, endDate) {
			if (value != null && value != undefined
					&& value != "") {
				startTime1 = value.split("至")[0];
				endTime1 = value.split("至")[1];
				
			} else {
				startTime1 = null;
				endTime1 = null;
			}

		}
	});
		
	laydate.render({
		elem : '#createTimeInput2',
		type : 'date',
		range : '至',
		done : function(value, date, endDate) {
			if (value != null && value != undefined
					&& value != "") {
				startTime2 = value.split("至")[0];
				endTime2 = value.split("至")[1];
				
			} else {
				startTime2 = null;
				endTime2 = null;
			}

		}
	});
	
	
    //加载table
    tableIns1 = table.render({
      elem: '#showTable1'
      , contentType: 'application/json'
      , headers: {"authorization": token}
      , page: true //开启分页
      , url: '/gas/camchange/list1' //数据接口
      , where: {createTimeStart : $("#createTimeInput1").val().split('至')[0],
				 createTimeEnd : $("#createTimeInput1").val().split('至')[1]} // 初始化时的过滤条件
	      
      , method: 'POST'
      , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
        return {
          "code": res.code, //解析接口状态
          "msg": res.msg, //解析提示文本
          "count": CoreUtil.isEmpty(res.data) ? 0 : res.data.total, //解析数据长度
          "data": CoreUtil.isEmpty(res.data) ? null : res.data.records //解析数据列表
        }
      }
      , cols: [
        [
          {field: 'id', title: '主键', sort: true, hide: true},
          {field: 'messageCamid', title: '摄像头ID', sort: true},
          {field: 'messageGroupid', title: '加油站', sort: true, hide: true},
          {field: 'stationinfoName', title: '加油站', sort: true},
          {field: 'taxpayerCode', title: '纳税人识别号', sort: true},
          {field: 'createTime', title: '发生时间', sort: true},
          {field: 'image', title: '图片',templet: function(d) {
				if(!CoreUtil.isEmpty(d.image)){
					return '<a href="javascript:;" data-src="'+d.image+'" class="layui-table-link" onclick="showImage(this)">预警图片</a>';
				}
			  }
		   },
          
          {toolbar: "#tool1", fixed: 'right',title: '操作'}
        ]
      ]
      , toolbar: '#toolbar1'
    });

    //加载table
    tableIns2 = table.render({
      elem: '#showTable2'
      , contentType: 'application/json'
      , headers: {"authorization": token}
      , page: true //开启分页
      , url: '/gas/camchange/list2' //数据接口
      , where: {createTimeStart : $("#createTimeInput2").val().split('至')[0],
				 createTimeEnd : $("#createTimeInput2").val().split('至')[1]} // 初始化时的过滤条件
	      
      , method: 'POST'
      , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
        return {
          "code": res.code, //解析接口状态
          "msg": res.msg, //解析提示文本
          "count": CoreUtil.isEmpty(res.data) ? 0 : res.data.total, //解析数据长度
          "data": CoreUtil.isEmpty(res.data) ? null : res.data.records //解析数据列表
        }
      }
      , cols: [
        [
          {type: 'checkbox', fixed: 'left'},
          {field: 'id', title: '主键', sort: true, hide: true},
          {field: 'messageCamid', title: '摄像头ID', sort: true},
          {field: 'messageGroupid', title: '加油站', sort: true, hide: true},
          {field: 'stationinfoName', title: '加油站', sort: true},
          {field: 'taxpayerCode', title: '纳税人识别号', sort: true},
          {field: 'handleType', title: '处理类型', sort: true},
          {field: 'handleReason', title: '处理原因', sort: true},
          {field: 'createTime', title: '发生时间', sort: true},
          {field: 'updateTime', title: '处理时间', sort: true},
          {field: 'updateId', title: '处理人员', sort: true},
          {field: 'image', title: '图片',templet: function(d) {
				if(!CoreUtil.isEmpty(d.image)){
					return '<a href="javascript:;" data-src="'+d.image+'" class="layui-table-link" onclick="showImage(this)">预警图片</a>';
				}
			  }
		   },
          
          /* {width: 120, toolbar: "#tool", title: '操作'} */
        ]
      ]
      , toolbar: '#toolbar2'
    });
    
    
    //列操作
    table.on('tool(showTable)',function (obj) {
      var data = obj.data;
      switch (obj.event) {
        case 'del':
          var ids=[];
          ids.push(data.id);
          tipDialog(ids);
          break;
        case 'edit':
          $(".table_div").hide();
          $(".operation").show();
          $(".title").html("处理");
          $(".operation input[name=id]").val(data.id);
          $(".operation input[name=messageCamid]").val(data.messageCamid);
          $(".operation input[name=messageCamid]").attr("disabled", true);
          $(".operation input[name=messageCamid]").attr("readonly",true);
          
          $(".operation input[name=stationinfoName]").val(data.stationinfoName);
          $(".operation input[name=stationinfoName]").attr("disabled", true);
          $(".operation input[name=stationinfoName]").attr("readonly",true);
          
          $("#_image").attr("src",data.image);
          
          $(".operation input[name=handleType]").val("");
          $(".operation input[name=handleReason]").val("");
          form.render(); //更新全部
          break;
      }
    });

    //导出
    $('#export1').on('click', function () {
    	var createTimeInput = $("#createTimeInput1").val();
   	  	var arr = createTimeInput.split('至');
    	//原先分页limit
      var exportParams = {
        limit: -1,
        taxorgcode: $("#taxorgcodeInput1").val(),
  		stationinfoName: $("#stationNameInput1").val(),
  		createTimeStart: arr[0],
  		createTimeEnd: arr[1],
      };
      CoreUtil.sendPost("/gas/camchange/list1", exportParams, function (res) {
        //初始化渲染数据
        if (res.data != null && res.data.records != null) {
          table.exportFile(tableIns1.config.id, res.data.records, 'xls');
        }
      });
    });

    
    //导出
    $('#export2').on('click', function () {
    	var createTimeInput = $("#createTimeInput2").val();
   	  	var arr = createTimeInput.split('至');
    	//原先分页limit
	      var exportParams = {
	        limit: -1,
	        taxorgcode: $("#taxorgcodeInput2").val(),
	  		stationinfoName: $("#stationNameInput2").val(),
	  		createTimeStart: arr[0],
	  		createTimeEnd: arr[1],
	      };
	      CoreUtil.sendPost("/gas/camchange/list2", exportParams, function (res) {
	        //初始化渲染数据
	        if (res.data != null && res.data.records != null) {
	          table.exportFile(tableIns2.config.id, res.data.records, 'xls');
	        }
	      });
    });
    
    //监听保存
    form.on('submit(submit)', function(data){
      if(data.field.id===undefined || data.field.id===null || data.field.id===""){
        CoreUtil.sendPost("/gas/camchange/add",data.field,function (res) {
          $(".table_div").show();
          $(".operation").hide();
          search1();
          search2();
        });
      }else {
        CoreUtil.sendPut("/gas/camchange/update",data.field,function (res) {
          $(".table_div").show();
          $(".operation").hide();
          search1();
          search2();
        });
      }
      return false;
    });
  });

  //执行查询
  function search1() {
	  var createTimeInput = $("#createTimeInput1").val();
 	  var arr = createTimeInput.split('至');
 	  
	  //这里以搜索为例
    	tableIns1.reload({
      		where: { //设定异步数据接口的额外参数，任意设
    	  		taxorgcode: $("#taxorgcodeInput1").val(),
    	  		stationinfoName: $("#stationNameInput1").val(),
    	  		createTimeStart: arr[0],
    	  		createTimeEnd: arr[1],

      		}
      	, page: {
        		curr: 1 //重新从第 1 页开始
      		}
    	});
  };
  
  function search2() {
	  var createTimeInput = $("#createTimeInput2").val();
 	  var arr = createTimeInput.split('至');
 	  
	  //这里以搜索为例
    	tableIns2.reload({
      		where: { //设定异步数据接口的额外参数，任意设
    	  		taxorgcode: $("#taxorgcodeInput2").val(),
    	  		stationinfoName: $("#stationNameInput2").val(),
    	  		createTimeStart: arr[0],
    	  		createTimeEnd: arr[1],

      		}
      	, page: {
        		curr: 1 //重新从第 1 页开始
      		}
    	});
  };
  
  
  
	function firstDayOfMonth() {
  		const currentDate = new Date();
  		const year = currentDate.getFullYear();//获取当前年
  		const month = String(currentDate.getMonth() + 1).padStart(2, "0");//获取当前月
  		const firstDay = "01";//日
  		return `${year}-${month}-${firstDay}`;
    };
	
    function lastDayOfMonth() {
    	// 获取当前日期
    	const currentDate = new Date();
    	// 获取当前年份
    	let year = currentDate.getFullYear();
    	// 获取下个月的月份，使用 padStart 在月份小于 10 时在前面补零
    	let month = String(currentDate.getMonth() + 2).padStart(2, "0");
    	// 如果月份为 '13'，说明当前是12月，需要更新年份并将月份设置为 '01'
    	if (month === '13') {
    	    year = year + 1;
    	    month = '01';
    	}
    	 
   	  	// 设置每个月的第一天为 '01'
   	  	let firstDay = "01";
   	  	// 构建下个月的第一天的日期字符串，格式为 'YYYY-MM-DD'
   	  	const firstDayOfNextMonth = `${year}-${month}-${firstDay}`;
   	  	// 计算当前月的最后一天，通过减去一天的毫秒数来得到
   	  	const lastDayOfMonth = new Date(new Date(firstDayOfNextMonth).getTime() - 86400000);
   	  	// 将最后一天的日期转换为 ISO 格式，并提取日期部分
   	  	return lastDayOfMonth.toISOString().split("T")[0];
	}
    
    
	  function showImage(obj) {
		  var src = $(obj).attr('data-src'); // 获取图片地址
		  layer.open({
		    type: 1,
		    title: false,
		    closeBtn: 0,
		    area: '500px',
		    skin: 'layui-layer-nobg', // 没有背景色的弹层
		    shadeClose: true,
		    content: '<img src="' + src + '" alt="图片" style="margin: auto; max-width: 100%; max-height: 100%">'
		  });
	   };
	   
	   $("#content1").click(function() {
			search1();
		});

		$("#content2").click(function() {
			search2();
		}); 
  
		$("#btn_cancel").click(function() {
			search1();
			$(".operation").hide();
	        $(".table_div").show();
	        
		}); 
		
		
</script>